<template>
  <scroll class="listview" :data = "shortcutList" ref="listview" 
  :listenScroll="listenscroll"
  :probeType = "probeType"
  @scroll = 'scroll'>
    <ul>
      <li class="list-group" v-for="(group,index) in data" :key = "index" ref="listGroup">
        <h2 class="list-group-title">{{group.name}}</h2>
        <ul>
          <li class="list-group-item" v-for= "(item,index) in group.items" :key = "index" @click = "selectitem(item)">
            <img class="avater" v-lazy="item.avatar" alt="">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="list-shortcut" @touchstart.stop.prevent = "onShortcutTouchStart" @touchmove.stop.prevent = "onShortcutTouchMove">
      <ul>
        <li class="item" v-for="(item,index) in shortcutList" :key="index" :data-index = "index" :class="{'current':currentIndex === index}">{{item}}</li>
      </ul>
    </div>
    <div class="list-fixed"  v-show="fiextitle" ref="fixed">
      <div class="fixed-title">{{fiextitle}}</div>
    </div>
    <div class="loading-container" v-show="!data.length">
      <loading></loading>
    </div>
  </scroll>
</template>

<script>
import Scroll from "base/scroll/scroll.vue"
import {getData} from "commom/js/dom.js"
import Loading from 'base/loading/loading.vue'
const ANCHOR_HEIGHT = 18;
const TITLE_HEIGHT = 30;
export default {
  components: { scroll },
    props: {
      data: {
        type: Array,
        default: null
      }
    },
    data(){
      return{
        scrollY:-1,
        currentIndex:-1,
        diff:-1
      }
    },
    computed:{
      shortcutList(){
        return this.data.map((item)=>{
          return item.name.substr(0,1)
        })
      },
      fiextitle(){
        if(this.scrollY > 0){
          return '';
        }
        return this.data[this.currentIndex] ? this.data[this.currentIndex].name : ''
      }
    },
    created(){
      this.touche = {}
      this.probeType = 3
      this.listenscroll = true
      this.listHeight = []
    },
    methods:{
      refresh() {
        this.$refs.listview.refresh()
      },
      onShortcutTouchStart(e){
        this.touche.anchorIndex = getData(e.target,'index');    
        this._scrollTo(this.touche.anchorIndex);
        let firsttouch = e.touches[0];
        this.touche.y1 = firsttouch.pageY
      },
      onShortcutTouchMove(e){
        let firsttouch = e.touches[0];
        this.touche.y2 = firsttouch.pageY;
        let delta = Math.floor((this.touche.y2 - this.touche.y1)/ANCHOR_HEIGHT);
        this._scrollTo( delta + parseInt(this.touche.anchorIndex));
      },
      selectitem(item){
        this.$emit("selectitem",item);
      },
      scroll(pos){
        this.scrollY = pos.y
      },
      _scrollTo(index){
        if(!index && index !== 0){
          return;
        }
        if(index < 0){
          index = 0
        }
        this.$refs.listview.scrollToElement(this.$refs.listGroup[index],200);
        this.scrollY = -this.listHeight[index]
      },
      _caculateHeight(){
        this.listHeight = [];
        let list = this.$refs.listGroup;
        let hight = 0;
        this.listHeight.push(hight);
        for(var i = 0;i<list.length;i++){
          hight += list[i].clientHeight;
          this.listHeight.push(hight);
        }
      }
    },
    watch:{
      data(){
        setTimeout(()=>{
          this._caculateHeight()
        },20)
      },
      scrollY(newY){
        const listHeight = this.listHeight
        if(newY > 0){
          this.currentIndex = 0;
          return;
        }
        for(var i = 0;i<listHeight.length-1;i++){          
          let height_1 = listHeight[i];
          let height_2 = listHeight[i+1];       
          if((-newY) >= height_1 && (-newY) < height_2){
            this.currentIndex = i; 
            this.diff = height_2 + newY  
            return;
          }
        }
        this.currentIndex = listHeight.length -2;
      },
      diff(newval){
        let fiexTop = (newval > 0 && newval < TITLE_HEIGHT) ? (newval - TITLE_HEIGHT) : 0;
        if (this.fixedTop === fiexTop) {
          return
        }
        this.fixedTop = fiexTop
        this.$refs.fixed.style.transform = `translate3d(0,${this.fixedTop}px,0)`
      }
    },
    components:{
      Scroll,
      Loading
    }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
.listview
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .list-group
    padding-bottom :30px;
    .list-group-title
      padding-left :20px;
      height: 30px;
      line-height: 30px;
      font-size: $font-size-small
      color: $color-text-l
      background: $color-highlight-background
    .list-group-item
      display: flex;
      align-items :center;
      padding :20px 0 0 30px;
      .avater
        height: 50px;
        width: 50px;
        border-radius :50%;
      .name
        margin-left: 20px
        color: $color-text-l
        font-size: $font-size-medium
  .list-shortcut
    position :absolute;
    right: 0;
    top :50%;
    transform :translateY(-50%);
    width: 20px;
    padding: 20px 0;
    border-radius :10px;
    background: $color-background-d;
    text-align :center;
    font-family: Helvetica;
    .item
      padding: 3px
      line-height: 1
      color: $color-text-l
      font-size: $font-size-small
      &.current
        color: $color-theme 
  .list-fixed
    position :absolute;
    top: 0;
    left: 0;
    width: 100%;
    .fixed-title
      height: 30px
      line-height: 30px
      padding-left: 20px
      font-size: $font-size-small
      color: $color-text-l
      background: $color-highlight-background
</style>